<template>
    <div>
        <el-tree :data="tree" node-key="id" ref="tree"
                 v-loading="loadingTree"
                 highlight-current
                 default-expand-all
                 show-checkbox
                 :expand-on-click-node="false"
                 :props="defaultProps">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span class="node-label">{{ node.label }}</span>

                    <span class="node-permission">
                        <el-checkbox-group v-model="permissionCheckList">
                            <template v-for="item in getMenuNodePermission(node.data.id)">
                                <el-checkbox :label="item.permission">{{item.name}}</el-checkbox>
                            </template>
                        </el-checkbox-group>

                    </span>
                </span>

        </el-tree>
    </div>

</template>

<script>
    import { mapGetters } from 'vuex'
    import {selectTree} from '@/api/system/menu'
    import {
        selectList as selectListPermission,
        findPermissionByMenuId,
        generateDefaultPermission
    } from '@/api/system/permission'
    export default {
        name: "my-permission",
        computed: {
            ...mapGetters(['page_permissions', 'action_permissions'])
        },
        created() {
            this.getAllPermission()
        },
        data() {
            return {
                tree: null,
                loadingTree: false,
                permissionList: [],
                permissionCheckList: [],
                defaultProps: {
                    label: 'name',
                    children: 'children'
                },
            }
        },
        methods: {
            getTree() {//获取菜单树
                selectTree().then(response => {
                    this.tree = response.data
                    this.loadingTree = false
                })
            },
            getAllPermission() { //加载所有权限
                this.loadingTree = true
                selectListPermission().then(response => {


                    if (response.data.status === 200) {
                        this.permissionList = response.data.data

                        //我的权限（选中）
                        let myPermission = []
                        for (let k of Object.keys(this.action_permissions)) {
                            myPermission.push(k)
                        }
                        this.permissionCheckList = [...this.page_permissions, ...myPermission]
                    } else {
                        this.$notify({
                            title: '发生错误', message: response.data.msg,
                            type: 'error', duration: 2000
                        })
                    }
                }).then(() => {
                    this.getTree()
                }).catch(error => {
                })
            },
            getMenuNodePermission(menuId) { //根据菜单ID从所有权限中获取对应的权限
                let nodePermission = this.permissionList.filter(function (item, index, array) {
                    return item.menuId == menuId
                })
                return nodePermission
            },
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;

            .node-label {
                width: 150px;
                min-width: 150px;
            }

            .node-permission {
                width: 100%;
                .el-checkbox-group{
                    font-size: 14px;
                }
            }
        }
</style>
